<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>节点的操作</title>
    <style type="text/css">
      body {
        margin: 0px auto;
        font-size: 12px;
        line-height: 20px;
        background-color: cornsilk;
      }
      #like {
        width: 70%;
        border-radius: 10px;
        background: url(./images/bg.png) no-repeat left bottom;
        background-color: rgb(252, 247, 247);
        padding-top: 10px;
        padding-left: 200px;
        margin: 10px auto;
        border: 1px dashed rgb(252, 199, 199);
      }
      h1 {
        color: rgb(0, 128, 96);
        font-size: 24px;
        margin-top: 20px;
      }
      #like button {
        background-color: rgb(0, 128, 96);
        color: #fff;
        border: 0;
        width: 150px;
        height: 30px;
        font-size: 14px;
        margin: 10px 10px 20px 20px;
      }
      input[type="text"] {
        margin-top: 5px;
        border: 1px solid #ccc;
        background-color: rgb(237, 253, 249);
        height: 25px;
      }
      input[type="text"]:focus {
        border: 0;
        outline: none;
        border: 1px solid rgb(0, 128, 96);
      }
      input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin-top: 5px;
      }
      ul li {
        list-style: none;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id="like">
      <h1 id="love">选择你喜欢的水果：</h1>
      <ul id="fruit">
        <li><input type="checkbox" />苹果</li>
        <li><input type="checkbox" />香蕉</li>
        <li><input type="checkbox" />葡萄</li>
        <li><input type="checkbox" />香梨</li>
        <li><input type="checkbox" />西瓜</li>
      </ul>
      <h3>添加水果</h3>
      <input type="text" name="" id="addfruit" />
      <button id="addFruit">添加水果</button>
      <button id="removeFruit">删除水果</button>
    </div>
    <script>
      // 为添加水果按钮绑定单击事件
      document.querySelector("#addFruit").onclick = function () {
        // 获取文本的值
        var fruit = document.querySelector("#addfruit").value;
        // 创建文本节点
        var fruitNode = document.createTextNode(fruit);
        // 创建列表项节点和复选框节点
        var liNode = document.createElement("li");
        var ckNode = document.createElement("input");
        // 设置复选框的type属性
        ckNode.setAttribute("type", "checkbox");
        // 依次将复选框节点和文本节点追加到列表项节点
        liNode.appendChild(ckNode);
        liNode.appendChild(fruitNode);
        // 将列表项节点追加到ul节点
        document.querySelector("#fruit").appendChild(liNode);
        // 清空文本框的值
        document.querySelector("#addfruit").value = "";
      };

      // 删除选中的水果
      document.querySelector("#removeFruit").onclick = function () {
        // 获取id为fruit的ul中的复选框
        var cks = document
          .querySelector("#fruit")
          .querySelectorAll("input[type='checkbox']");
        // 通过循环判断哪个复选框选中
        for (var i = 0; i < cks.length; i++) {
          if (cks[i].checked) {
            // cks[i]是复选框节点，返回1次parentNode是li节点，返回2次parentNode是ul节点
            // 要删除的是li节点，需要在其父节点上操作
            cks[i].parentNode.parentNode.removeChild(cks[i].parentNode);
          }
        }
      };
    </script>
  </body>
</html>
